<template>
	<view :style="{overflow: isOverflowHidden ? 'hidden' : '', width: '100vw', height: '100vh'}">
		<view class="sign-box">
			<scroll-view scroll-x="true" style="white-space: nowrap;height: 200rpx;position: relative;">
				<view class="sign-list">
					<view :class="['sign-item', currentDateIndex == i ? 'active' : '']" v-for="(item, i) in futureDates" :key="i" @tap="currentDateChange(i)">
						<view class="">{{ item.date }}</view>
						<view class="day">{{ item.desc }} </view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="content-wrap">
			<view class="title-box">
				<view class="title-item">
					<view class="title" @tap="showPop">{{ searchOrderByCurrentName }}</view>
					<u-image width="14rpx" height="7rpx" :src="getServerStatic('/static/images/a39.png')"></u-image>
				</view>
				<view class="title-item">
					<view class="title" @tap="showPopAll">{{ searchProjectCurrentName }}</view>
					<u-image width="14rpx" height="7rpx" :src="getServerStatic('/static/images/a39.png')"></u-image>
				</view>
			</view>
			<view class="count-list">
				<!-- 默认排序选择窗口 -->
				<view class="select-wrap" v-if="isShowPop">
					<view :class="['select-item', searchOrderByCurrent == item.value ? 'active-item' : '']" v-for="(item, i) in filterList" :key="i" @tap="changeSearchOrderByCurrent(item)">
						{{item.name}}
					</view>
				</view>
				<!-- 全部科室选择窗口 -->
				<view class="select-wrap-all" v-if="isShowPopAll">
					<view class="left">
						<scroll-view scroll-y="true" style="max-height: 50vh;width: 200rpx;">
							<view :class="['select-item', searchParentProjectCurrent == item.id ? 'active-item' : '']" v-for="(item, i) in departmentList" :key="i" @tap="changeParentDepartment(item)">{{item.name}}</view>
						</scroll-view>
					</view>
					<view class="right">
						<scroll-view scroll-y="true" style="max-height: 50vh;width: 100%;">
							<view class="select-name-item">
								<view class="l-name">{{ selectParentDepartmentName }}</view>
								<view :class="['tag-item', searchChildProjectCurrent == item.id ? 'active-tag-item' : '']" v-for="(item, i) in childDepartmentList" :key="i" @tap="changeChildDepartment(item)">
									{{ item.name }}
								</view>
							</view>
						</scroll-view>
					</view>
				</view>

                <view class="user-box" v-for="(item, i) in dockerScheduleList" :key="i">
                    <view class="btn">
                        <u-button :disabled="item.stock <= 0" throttleTime="1000" :customStyle="{height: '56rpx', width: '210rpx'}" :hairline="false" type="mini" shape="circle"
                                  color="linear-gradient(315deg, #D66A44 0%, #ECBFAF 100%)" @click="goConfirm(item.doctor_id)" v-if="item.stock > 0">
                            <span v-if="item.stock > 0">立即预约</span>
                            <span v-else>约满</span>
                        </u-button>
                    </view>
                    <view class="userinfo">
                        <u-avatar :src="checkAndFixUrl(item.avatar)" size="116rpx"></u-avatar>
                        <view class="content-box">
                            <view class="name-box">
                                <view class="name">{{ item.name }}</view>
                                <view class="tag">{{ item.job_title }}</view>
                            </view>
                            <view class="name1">{{ item.department_name }}</view>
                        </view>
                    </view>
                    <view class="skill-box">{{ item.desc }}</view>
                </view>

                <u-loadmore :status="loadMoreStatus" />
			</view>
		</view>
	</view>

</template>

<script setup>
    import {ref, reactive, readonly} from "vue"
    import {onLoad, onShow, onPullDownRefresh , onReachBottom} from '@dcloudio/uni-app'
    import {checkAndFixUrl, getFutureDates, getServerStatic} from "@/utils/tool";
    import {getDepartments} from "@/api/cms";
    import {useHospitalStore} from "@/store";
    import {getScheduledDoctors} from "@/api/doctor";
    // 医院store
    const hospitalStore = useHospitalStore()
    // 日期
    const futureDates = getFutureDates()
    const defaultDate = ref(futureDates[0].fullDate)
    // 排班列表
    const dockerScheduleList = ref([])
    const currentPage = ref(1)
    const perPage = ref(10)
    // loadmore loading nomore
    const loadMoreStatus = ref('loadmore')

    // 医生
    const doctorId = ref(0)
    const doctorName = ref('')

    onLoad((evt) => {
        console.log('携带参数', evt)
        doctorId.value = evt?.doctor_id ?? 0
        doctorName.value = evt?.doctor_name ?? ''

        handleGetParentDepartments()
    })

    onShow(() => {
        // 获取排班医生.
        handleGetScheduledDoctors()
    })

    // 切换日期
    const currentDateIndex = ref(0)
    const currentDateChange = e => {
        currentDateIndex.value = e
        console.log('切换日期:', futureDates[e])
        defaultDate.value = futureDates[e].fullDate
        refreshPage()
        handleGetScheduledDoctors()
    }

	// 默认排序列表排序选择
	const isShowPop = ref(false)
    // 排序值
	const searchOrderByCurrent = ref('')
    const searchOrderByCurrentName = ref('默认排序')
	const filterList = ref([
		{ name: '默认', value: ''},
		{ name: '职称',  value: 'job_level'},
		{ name: '号量', value: 'stock'},
	])

	const showPop = () => {
		isShowPopAll.value = false
		isShowPop.value = !isShowPop.value
	}
    // 切换排序
	const changeSearchOrderByCurrent = e => {
        searchOrderByCurrent.value = e.value
        if (e.value == '') {
            searchOrderByCurrentName.value = '默认排序'
        } else {
            searchOrderByCurrentName.value = e.name
        }
		isShowPop.value = false
        refreshPage()
        handleGetScheduledDoctors()
	}

	// 全部科室选择列表
	const isShowPopAll = ref(false)
	const searchParentProjectCurrent = ref(0)
	const departmentList = ref([
		{name: '脑科', id: 0},
		{name: '五官科', id: 1},
		{name: '外科', id: 2},
		{name: '内科', id: 3},
	])
    // 选择的一级科室
    const selectParentDepartmentName = ref('')
    const searchProjectCurrentName = ref('全部科室')

    // 二级
    const childDepartmentList = ref([])
    const searchChildProjectCurrent = ref(0)
	const showPopAll = () => {
		isShowPop.value = false
		isShowPopAll.value = !isShowPopAll.value
	}
	const changeParentDepartment = (item) => {
        searchParentProjectCurrent.value = item.id
        selectParentDepartmentName.value = item.name
        if (item.id == 0) {
            isShowPopAll.value = false
            searchProjectCurrentName.value = '全部科室'
            searchChildProjectCurrent.value = 0

            refreshPage()
            handleGetScheduledDoctors()
        }
        handleGetChildDepartments(item.id)
	}

    const changeChildDepartment = (item) => {
        searchChildProjectCurrent.value = item.id
        searchProjectCurrentName.value = item.name
        isShowPopAll.value = false
        refreshPage()
        handleGetScheduledDoctors()
    }

	// 如果弹窗显示页面不可滚动
	const isOverflowHidden = computed(() => {
		return isShowPopAll.value || isShowPop.value
	})

    // 预约 跳转医生主页.
    const goConfirm = (doctorId) => {
        uni.navigateTo({
            url: `/mine/reservation/userinfo?scheduleDate=${defaultDate.value}&doctorId=${doctorId}`
        })
    }

    // 获取科室列表 一级
    const handleGetParentDepartments = async () => {

        const {code, data} = await getDepartments({
            pid: 0,
            store_id: hospitalStore.id
        })

        if (code == 1) {
            departmentList.value = data
            selectParentDepartmentName.value = data[0].name
            searchParentProjectCurrent.value = data[0].id
            await handleGetChildDepartments(data[0].id)
        } else {
            departmentList.value = []
        }
        let list = departmentList.value
        list.unshift({
            id: 0,
            name: '默认'
        });
        departmentList.value = list
    }

    // 获取二级
    const handleGetChildDepartments = async (pid) => {
        const {code, data} = await getDepartments({
            pid: pid,
            store_id: hospitalStore.id
        })

        if (code == 1) {
            childDepartmentList.value = data
        } else {
            childDepartmentList.value = []
        }
    }

    // 刷新数据.
    const refreshPage = () => {
        currentPage.value = 1
        dockerScheduleList.value = []
    }

    onReachBottom(() => {
        handleGetScheduledDoctors()
        console.log("上拉加载更多")
    })

    onPullDownRefresh(() => {
        console.log("下拉刷新")
        refreshPage()
        handleGetScheduledDoctors()
        setTimeout(() => {
            uni.stopPullDownRefresh()
        }, 500)
    })

    // 获取参数.
    const getSearchParams = () => {
        return {
            store_id: hospitalStore.id,
            schedule_date: defaultDate.value,
            doctor_name: doctorName.value,
            doctor_id: doctorId.value,
            project_id: searchChildProjectCurrent.value,
            order_by: searchOrderByCurrent.value,
            currentPage: currentPage.value,
            perPage: perPage.value,
        }
    }

    // 获取排班医生.
    const handleGetScheduledDoctors = async () => {
        const param = getSearchParams()
        loadMoreStatus.value = 'loading'
        console.log('筛选参数',param)
        const {code, data, message} = await getScheduledDoctors(param)
        if (code === 1) {
            if (data.length <= 0) {
                loadMoreStatus.value = 'nomore'
                console.log('noting')
            } else {
                currentPage.value++
                // 数量少于每页数量
                if (data.length < perPage.value) {
                    loadMoreStatus.value = 'nomore'
                } else {
                    loadMoreStatus.value = 'loadmore'
                }
            }
            dockerScheduleList.value = dockerScheduleList.value.concat(data)
        } else {
            loadMoreStatus.value = 'nomore'
        }
        console.log('结果',data)
    }

</script>

<style lang="scss" scoped>
	.sign-box {
		width: 100%;
		height: 200rpx;
		background-color: #fff;
		.sign-list {
			padding: 40rpx;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 9;
			display: flex;
			align-items: center;
			.sign-item {
				@include center();
				flex-direction: column;
				padding: 16rpx 20rpx;
				font-size: 30rpx;
				color: #222222;
				border-radius: 10rpx;
				margin-right: 40rpx;
				.day {
					margin-top: 18rpx;
					color: #999999;
				}
			}
			.active {
				color: #FFFFFF;
				background: #516DDB;
				.day {
					color: #fff;
				}
			}
		}
	}

	.content-wrap {
		margin-top: 10rpx;

	}
	.title-box {
		position: relative;
		background: #FFFFFF;
		width: 100%;
		height: 110rpx;
		padding: 33rpx 40rpx;
		display: flex;
		align-items: center;
		margin-bottom: 4rpx;
		.title-item {
			display: flex;
			align-items: center;
			margin-right: 70rpx;
		}

		.title {
			font-size: 30rpx;
			color: #222222;
			margin-right: 12rpx;
		}
	}
	.count-list {
		position: relative;
		padding: 32rpx 26rpx;
		background: #FFFFFF;
		.select-wrap {
			position: absolute;
			width: 240rpx;
			height: 300rpx;
			left: 0;
			top: 0;
			background-color: #fff;
			padding: 40rpx 60rpx 0;
			z-index: 9;
			box-shadow: 0 8rpx 12rpx rgba(0, 0, 0, 0.1);

		}

		.select-wrap-all {
			width: 100vw;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 999;
			box-shadow: 0 8rpx 12rpx rgba(0, 0, 0, 0.1);
			display: flex;
			justify-content: center;
			.left {
				width: 200rpx;
				background-color: #fff;
				padding: 40rpx 0 0;
			}
			.right {
				flex: 1;
				background: #F5F6F8;
				padding: 30rpx;
				.select-name-item {
					.l-name {
						color: #222222;
						font-size: 40rpx;
						margin-bottom: 30rpx;
					}
					.tag-item {
						width: 100%;
						height: 110rpx;
						background: #FFFFFF;
						border-radius: 10rpx 10rpx 10rpx 10rpx;
						padding-left: 30rpx;
						color: #444444;
						font-size: 32rpx;
						line-height: 110rpx;
						margin-bottom: 18rpx;
					}
                    .active-tag-item {
                        color: #516DDB;
                    }
				}
			}
		}
		.select-item {
			font-size: 32rpx;
			color: #606672;
			margin-bottom: 50rpx;
			text-align: center;
		}
		.active-item {
			color: #516DDB;
			font-size: 40rpx;
		}

		.user-box {
			position: relative;
			padding: 30rpx 28rpx;
			background: #fff;
			border-radius: 20rpx;
			margin-bottom: 30rpx;
			box-shadow: 0rpx 0rpx 20rpx 1rpx rgba(187,187,187,0.16);
			.btn {
				position: absolute;
				right: 23rpx;
				top: 60rpx;
				z-index: 99;
			}
		}
		.skill-box {
			margin-top: 14rpx;
			color: #606672;
			line-height: 50rpx;
            max-height: 150rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: pre-wrap;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
		}
		.userinfo {
			@include center();
			.content-box {
				flex: 1;
				margin-left: 24rpx;

				.name-box {
					@include start();

					.name {
						font-size: 36rpx;
						color: #222222;
					}

					.tag {
						font-size: 24rpx;
						color: #606672;
						margin-left: 16rpx;
					}
				}

				.name1 {
					color: #516DDB;
					margin-top: 12rpx;
				}
			}
		}
	}
</style>
